<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var Canvas = function(w, h) {
        this.width = w;
        this.height = h;
      };
      Canvas.prototype = {
        init: function() {
          var oC = document.createElement("canvas");
          oC.setAttribute("width", this.width);
          oC.setAttribute("height", this.height);
          oC.setAttribute("id", "canvas");
          oC.style.backgroundColor = "#000";
          document.body.appendChild(oC);
        }
      };
      var curWinWidth = window.innerWidth,
        curWinHeight = window.innerHeight;
      var oCanvas = new Canvas(curWinWidth, curWinHeight);
      oCanvas.init();

      var oC = document.querySelector("#canvas");
      var width = oC.width,
        height = oC.height,
        oGc = oC.getContext("2d");

      function random(min, max) {
        return Math.random() * (max - min) + min;
      }
      var Snow = function() {};
      Snow.prototype = {
        init: function() {
          this.x = random(0, width);
          this.y = 0;
          this.r = random(1, 5);
          this.vy = random(3, 5);
        },
        // 初始化雪花的位置( x, y 坐标 )、速度、半径( 雪花的大小，在这里我们把雪花用半径不同的圆表示 ）
        // 1，雪花出来的时候，一般是在屏幕的最上方出现的，所以雪花的y坐标都是0,  其次，雪花的x坐标是随机的，他的范围是从屏幕的左边到右边，那么就是 0 ~ width. 这个width就是canvas的宽度，也就是浏览器的宽度
        // 2，雪花的半径r, 设置为1 ~ 5之间的任意值
        // 3，雪花下降的速度设置为3 ~ 5之间的随机速度，这里我做的下雪是垂直方向往下飘，你可以拓展，考虑风力影响( 这个时候肯定有水平方向的速度 )
        draw: function(cxt) {
          cxt.beginPath();
          cxt.fillStyle = "white";
          cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);
          cxt.fill();
          cxt.closePath();
          this.update(cxt);
        },
        // 参数cxt就是canvas的上下文，这个函数很简单，就是一个arc方法调用init中设置的值来画圆（雪花），在该方法的最后调用了
        // 一个update方法，他是干嘛的？他是更新雪花在垂直方向的速度
        update: function(cxt) {
          if (this.y < height - this.r) {
            this.y += this.vy;
          } else {
            this.init();
          }
        }
      };
      // 在update方法中，我们做了边界判断： 雪花往下飘落的时候，肯定会消失，消失之后怎么处理？没有到达边界怎么处理？
      // canvas的高度减去雪花的半径，这就是雪花要消失时候的边界，所以this.y  < height - this.r  如果这个条件成立，那么说明雪花一直
      // 在飘着，我们就要把雪花的y方向的位置更新，雪花看起来（‘正在下雪’），当一个雪花快要消失的时候，我们再把他移动到初始的位置，这样看
      // 起来就是在圆圆不断的下雪，而不需要重新绘制雪花（如果这样做，肯定会影响性能，这个特效最后肯定会被卡死，这个小技巧很多类似的特效都
      // 会用到）。至此核心的流程已经搞定，接下来，我们就要大量的生成雪花了。

      var snow = [];
      for (var i = 0; i < 500; i++) {
        setTimeout(function() {
          var oSnow = new Snow();
          oSnow.init();
          snow.push(oSnow);
        }, 100 * i);
      }
      // 生成500个雪花，不是同时生成的，然后把这些雪花保存到数组snow中.
      (function move() {
        oGc.clearRect(0, 0, width, height);
        for (var i = 0; i < snow.length; i++) {
          snow[i].draw(oGc);
        }
        requestAnimationFrame(move);
      })();
    }
  }
};
</script>
<style lang="less" scoped>
body {
  overflow: hidden;
}
</style>

